<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <title>Logging Viewer</title>
    <style>{{.CSS}}</style>
</head>
<body>

<div class="head">
    {{- if .TracedId}}
    <h1>{{.TracedId}}</h1>
    {{- else}}
    <h1>Trace id</h1>
    {{- end}}
    <dl>
        <dt>Span</dt>
        <dd>{{.SpanTotal}}</dd>
        <dt>Log</dt>
        <dd>{{.ItemTotal}}</dd>
    </dl>
    <div class="form">
        <form action="/trace" method="get">
            <input name="tid" type="text" placeholder="Trace id" value="{{.TraceId}}" />
            <input name="sid" type="text" placeholder="Span id" value="{{.SpanId}}" />
            <input name="pid" type="text" placeholder="Parent span id" value="{{.ParentSpanId}}" />
            <button type="submit">View</button>
        </form>
    </div>
</div>

<div class="main">
    <div class="container">
        {{- range .SpanList}}
        {{ span . }}
        {{- end}}
    </div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.7.1.js" type="application/javascript"></script>
<script type="application/javascript">
    $(document).ready(function (){
        $('[span-head]').on('click', function (){
            $('[span-id="'+$(this).attr('span-head')+'"]').toggleClass('span-hide');
        });
        $('.as-message').on('click', function (){
            $(this).toggleClass('break-word');
        })
    })
</script>
</html>
